<template>
  <div class="personal">
    <div class="userinfo">
      <div class="avatorLeft" v-if="userInfo.avatarUrl">
        <img :src="userInfo.avatarUrl + '?param=400y400'" alt="" />
      </div>
      <div class="infoRight">
        <div class="top">
          <div class="name">{{ userInfo.nickname }}</div>
          <div class="btn" v-if="userInfo.userId === parseInt(keyId)">
            <button @click="exitLogin">退出登录</button>
          </div>
          <div class="register">Lv{{ userInfo.level }}</div>
        </div>
        <div class="bottom">
          <div class="item">
            <div class="userItem">
              <div class="num">{{ userInfo.eventCount }}</div>
              <div class="itemName">动态</div>
            </div>
            <div class="userItem">
              <div class="num">{{ userInfo.newFollows }}</div>
              <div class="itemName">关注</div>
            </div>
            <div class="userItem">
              <div class="num">{{ userInfo.followeds }}</div>
              <div class="itemName">粉丝</div>
            </div>
          </div>
          <div class="userDeatil">
            <div class="id">
              用户id: <span>{{ userInfo.userId }}</span>
            </div>
            <div class="area">
              所在地区:
              <span>{{ userInfo.province + ' ' + userInfo.city }}</span>
            </div>
            <div class="user">
              个人介绍:
              <span>{{
                userInfo.signature === '' ? '暂无介绍' : userInfo.signature
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="songList">
      <div class="userCreateList">
        <div class="title" v-if="createMusicList.length != 0">
          {{ userInfo.nickname }}创建的歌单({{ createMusicList.length }})
        </div>
        <div class="bodyBox">
          <songItem
            v-for="(item, index) in createMusicList"
            :key="index"
            :itemData="item"
            @handleClick="handleClick"
          ></songItem>
        </div>
      </div>
      <div class="userCollectList" v-if="collectMusicList.length != 0">
        <div class="title">
          {{ userInfo.nickname }}收藏的歌单({{ collectMusicList.length }})
        </div>
        <div class="bodyBox">
          <songItem
            v-for="(item, index) in collectMusicList"
            :key="index"
            :itemData="item"
            @handleClick="handleClick"
          ></songItem>
        </div>
      </div>
      <el-backtop target=".personal"></el-backtop>
    </div>
  </div>
</template>
<script>
import songItem from '../Discover/disCoverChildren/components/songItem.vue'
import { getUserInfo, getUserSongList } from '@/api/personal//personal'
export default {
  data() {
    return {
      userInfo: {}, //用户信息
      createMusicList: [],
      collectMusicList: [],
      keyId: localStorage.getItem('userId') || '' // 判断是自己主页还是别人的
    }
  },
  methods: {
    async getUserInfo() {
      const res = await getUserInfo(this.$route.query.id)
      if (!res) {
        this.$message.error('获取用户信息失败!')
        return
      }
      // console.log(res)
      res.data.profile['level'] = res.data.level
      this.userInfo = res.data.profile
      // console.log(this.userInfo)
    },
    // 请求用户歌单
    async getUserMusicList() {
      let timestamp = Date.parse(new Date())
      // 先从localStorage里面读取用户信息  如果登录成功是有存的
      let res = await getUserSongList({
        uid: this.$route.query.id,
        timestamp
      })
      if (!res) {
        this.$message.error('获取用户信息失败!')
        return
      }
      // console.log(res)
      // 对数据进行处理分类
      res = res.data.playlist
      let index = res.findIndex((item) => item.subscribed == true)
      res.name = `${this.userInfo.nickname}喜欢的音乐`
      this.createMusicList = res.slice(0, index)
      this.collectMusicList = res.slice(index)
    },
    // 跳转歌单详情
    handleClick(id) {
      this.$router.push({ path: '/index/musicDateil', query: { id } })
      // console.log(id)
    },
    exitLogin() {
      this.$store.commit('updataLoginState', false)
      localStorage.clear()
      this.$router.push('/')
      location.reload()
      this.$message.success('退出登录成功')
    }
  },
  created() {
    this.getUserInfo()
    this.getUserMusicList()
  },
  components: {
    songItem
  }
}
</script>
<style lang="scss" scoped>
.personal {
  height: 83vh;
  overflow-x: hidden;
  &::-webkit-scrollbar {
    display: none;
  }
}
.userinfo {
  display: flex;
  align-items: center;
  .avatorLeft {
    img {
      width: 200px;
      height: 200px;
      border-radius: 200px;
      background-color: pink;
      margin-right: 20px;
    }
  }
  .infoRight {
    width: 90%;
    position: relative;

    .top {
      width: 100%;
      border-bottom: 1px solid #ccc;
      padding-bottom: 20px;
      .name {
        font-size: 25px;
        font-weight: 700;
        margin-bottom: 8px;
      }
      .btn {
        position: absolute;
        right: 0;
        top: 0;
      }
      .register {
        width: 45px;
        border-radius: 25px;
        text-align: center;
        font-size: 14px;
        color: #666;
        background-color: #f0f0f0;
      }
    }
    .bottom {
      .item {
        display: flex;

        .userItem {
          padding: 0px 25px 0px;
          text-align: center;
          &:nth-child(1) {
            padding-left: 5px;
          }
          margin: 10px 0;
          &:nth-child(2) {
            border-right: 1px solid #dedddd;
            border-left: 1px solid #dedddd;
          }

          .num {
            font-size: 20px;
            color: #000;
          }
          .itemName {
            font-size: 14px;
            color: #666;
          }
        }
      }
      .userDeatil {
        padding-left: 5px;
        font-size: 14px;
        div {
          margin: 3px 0;
          span {
            color: #666;
          }
        }
      }
    }
  }
}
.songList {
  width: 1300px;
  margin: 0 auto;
  margin-top: 30px;

  .userCreateList,
  .userCollectList {
    .title {
      font-size: 18px;
      font-weight: 700;
    }
  }
}
// 创建的歌单
.bodyBox {
  display: flex;
  flex-wrap: wrap;
  padding-top: 20px;
  .songItem {
    flex: 19%;
    max-width: 250px;
    margin-right: 10px;
    margin-bottom: 20px;
    cursor: pointer;
    &:nth-child(5) {
      margin-right: 0;
    }
  }
}
.btn {
  button {
    width: 100px;
    height: 40px;
    border-radius: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
    &:hover {
      background-color: #f2f2f2;
      border-color: #ccc;
      // color: #ec4141;
    }
  }
}
</style>
